<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>视频播放器</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      background-color: #000;
    }

    #video-player {
      max-width: 800px;
      width: 100%;
      height: 500px;
      background-color: #000;
      position: relative; 
    }

    #video-player video {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    #file-selector::-webkit-file-upload-button {
      visibility: hidden;
    }

    #file-selector::before {
      content: '选择文件';
      display: inline-block;
      background-color: #4CAF50;
      color: #fff;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
    }

    #screenshot-button {
      position: absolute;
      bottom: 250px;
      right: 1px;
      background-color: #4CAF50;
      color: #fff;
      padding: 6px 10px;
      border-radius: 19px;
      cursor: pointer;
      visibility: hidden;
    }

    #video-player:hover #screenshot-button{
      visibility: visible;
    }

    #canvas {
      display: none;
    }
  </style>
</head>

<body>
  <div id="video-player">
    <video id="video" controls autoplay>
      <source src="" type="video/mp4">
      <source src="" type="video/webm">
      <source src="" type="video/ogg">
    </video>
    <button id="screenshot-button">截图</button>
    <canvas id="canvas"></canvas>
    <input type="file" id="file-selector">
  </div>

  <script>
    var fileSelector = document.getElementById('file-selector');
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var downloadLink = document.createElement('a');
    var screenshotButton = document.getElementById('screenshot-button');

    fileSelector.addEventListener('change', function(event) {
      var file = event.target.files[0];

      if (file.type.startsWith('video/mp4')) {
        var url = URL.createObjectURL(file);
        video.src = url;

      } else if (file.type.startsWith('video/webm')) {
        var url = URL.createObjectURL(file);
        video.src = url;

      } else if (file.type.startsWith('video/ogg')) {
        var url = URL.createObjectURL(file);
        video.src = url;
      }
    });

    video.addEventListener('ended', function() {
      video.currentTime = 0;
      video.play();
    });

    video.loop = true;

    screenshotButton.addEventListener('click', function() {
      var canvasContext = canvas.getContext('2d');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvasContext.drawImage(video, 0, 0, canvas.width, canvas.height);
      canvas.toBlob(function(blob) {
        var fileName = 'screenshot-' + Date.now() + '.png';
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = fileName;
        downloadLink.click();
      }, 'image/png');
    });
  </script>
</body>
</html>